<template>
  <div class="layout-container flex">
    <!-- 选择具体业务组件 -->
    <div class="left flex flex-wrap justify-between">
      <slot></slot>
    </div>
    <!-- 显示对应业务组件 -->
    <div class="layout-center">
      <router-view v-slot="{ Component }">
        <component :is="Component" :serialNum="1" :status="currentCom.status"></component>
      </router-view>
    </div>
    <!-- 编辑面板 -->
    <div class="right">
      <EditPannel :com="currentCom" />
    </div>
  </div>
</template>

<script setup lang="ts">
import EditPannel from '@/components/Survey/EditItems/EditPannel.vue'
import { dispatchStatus } from '@/stores/dispatch'
import { useMaterialStore } from '@/stores/useMaterial'
import { isPicLink, type PicLink } from '@/types'
import type { MaterialStore } from '@/types'
import { ElMessage } from 'element-plus'
const store = useMaterialStore() as unknown as MaterialStore
// const store = useMaterialStore()
// 获取选中组件的状态数据
const currentCom = computed(() => {
  // console.log(store.currentMaterialCom);
  return store.coms[store.currentMaterialCom]
})
// 拿到新的状态数据，然后修改仓库里面的数据
const updateStatus = (configKey: string, payload?: any) => {
  console.log(configKey, payload)
  const status: any = currentCom.value.status
  dispatchStatus(store, status, configKey, payload)
}
provide('updateStatus', updateStatus)
const getLink = (link: PicLink) => {
  // console.log(link)
  updateStatus('options', link)
}
provide('getLink', getLink)
</script>

<style scoped lang="scss">
.layout-container {
  width: 100%;
  // Header组件高度50px，h1高度50px，上下margin 20px，最后20px是额外多减去一部分，避免贴底
  height: calc(100vh - 100px - 40px - 20px);
  align-items: flex-start;
  border: 1px solid var(--border-color);
  border-top-right-radius: var(--border-radius-lg);
  border-bottom-left-radius: var(--border-radius-lg);
  border-bottom-right-radius: var(--border-radius-lg);
}
.left {
  width: 180px;
  text-align: center;
  align-items: flex-start;
  padding: 20px;
}
.layout-center {
  width: 550px;
  // 多减去的60px是上下的padding，，最后20px是额外多减去一部分，避免贴底
  height: calc(100vh - 100px - 40px - 60px - 20px);
  overflow-y: scroll;
  padding: 30px;
  border-left: 1px solid var(--border-color);
}
.right {
  width: 350px;
  height: calc(100vh - 100px - 40px - 20px);
  overflow-y: scroll;
  border-left: 1px solid var(--border-color);
}
</style>
